<template>
  <div class="yu-xi">
    <div class="yu-1">
      <div class="yu-2" v-for="i in 8" :key="i">
        预警ID:<span class="yu-text">2471111 这个是： {{ id }}</span>
      </div>
      <van-divider :style="{ borderColor: '#9a9da2' }" />
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="处理内容："
          type="textarea"
          maxlength="300"
          placeholder="请输入"
          show-word-limit
        />
      </van-cell-group>
      <van-uploader :after-read="afterRead" class="usn-1">
        <van-button icon="plus" type="success" size="small"
          >上传文件</van-button
        >
      </van-uploader>
      <div class="usn-2">
        <van-button type="success" size="small" @click="adduse"
          >添加抄送人</van-button
        >
      </div>
    </div>
    <van-button type="success" size="small" class="bu-o">提交</van-button>
  </div>
  <van-popup
    v-model:show="showRight"
    position="right"
    :style="{ width: '100%', height: '100%', background: '#ececec' }"
  >
    <van-nav-bar title="选择抄送人" left-arrow @click-left="onclickLeft" />
    <form action="/">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />
    </form>

    <van-radio-group v-model="checked">
      <getList></getList>
    </van-radio-group>
  </van-popup>
</template>

<script lang="ts" setup>
import { provide, ref } from 'vue'
import { showToast } from 'vant'

import getList from './getList.vue'
defineProps<{
  id: any
}>()
const message = ref('')
const showRight = ref(false)

const checked = ref()

const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file)
}
const adduse = () => {
  showRight.value = true

  checked.value = ''
}
const onclickLeft = () => {
  showRight.value = false
}
const value = ref('')
const onSearch = (val: any) => showToast(val)

const affirm = () => {
  // showRight.value = false
  console.log(checked.value)
}
const flag = ref(true)
provide('affirm', { affirm })
provide('flag', { flag })
</script>

<style lang="scss" scoped>
.yu-xi {
  padding: 10px;
  width: 100%;
  min-height: 713px;
  box-sizing: border-box;
}
.yu-1 {
  width: 100%;
  min-height: 600px;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
}
.bu-o {
  width: 100%;
  margin-top: 20px;
}
.yu-2 {
  margin-bottom: 20px;
}
.yu-text {
  margin-left: 40px;
}
.van-cell-group {
  background: #9d8f8f;
}
.van-cell-group--inset {
  margin: unset;
}
.usn-1 {
  margin-top: 20px;
}
.usn-2 {
  margin-top: 20px;
}
.but-on {
  width: 100%;
  background: #fff;
}
:deep() {
  .van-nav-bar {
    &__arrow {
      color: var(--cp-text4);
      font-size: 18px;
    }
    &__title {
      font-size: 15px;
      color: var(--cp-text4);
    }
  }
  .van-nav-bar__content {
    background: #2dbf85;
  }
}
</style>
